<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style:none;
        }
        /* 去掉图片底部缝隙 */
        img{
            vertical-align: bottom;
        }
        .w{
            width: 1200px;
            margin:0 auto;
        }
        .banner{
            height: 400px;
            position: relative;
            /* 超出banner的内容隐藏 */
            overflow:hidden;
            margin-top: 50px;
        }
        .banner .arrow_left{
            width: 36px;
            height: 44px;
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -22px;
            z-index:1;
            cursor: pointer;
        }
        .banner .arrow_right{
            width: 36px;
            height: 44px;
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -22px;

            z-index:1;
            cursor: pointer;
        }

        /* 为什么要给ul设置600%的宽度,因为我们需要把所有的li浮动成一行,ul必须有足够的宽度才可以放得下 */
        .banner ul {
            /* width:600%; */
            /* 因为手动复制了添加了一个li到ul的子元素列表后面,这个时候ul里面就有7个li */
            /* width: 700%; */

            /* 如果想要让ul可以移动,需要给ul设置绝对定位 */
            position: absolute;
            left: 0;
            top: 0;
        }
        .banner ul li{
            float: left;
        }

        .banner .circle{
            position: absolute;
            bottom: 20px;
            left: 50%;
            width: 120px;
            margin-left: -60px;
        }
        .banner .circle li{
            width: 10px;
            height: 10px;
            background:rgba(255,255,255,0.8);
            border-radius: 50%;
            float: left;
            margin-right: 10px;
            /* 鼠标模拟手势 */
            cursor: pointer;
        }
        /* 为了后面可以点击li高亮 */
        /* .banner .circle li:first-child{
            width: 20px;
            border-radius: 10px;
        } */
        /* 我们单独定义一个类名 .current  */
        .banner .circle .current{
            width: 20px;
            border-radius: 10px;
        }
        .banner .circle li:last-child{
            margin-right: 0;
        }
    </style>
</head>
<body>
    <div class="banner w">
        <!-- 左右按钮 -->
        <img src="images/prev.png" class="arrow_left"/>
        <img src="images/next.png" class="arrow_right"/>
        <!-- 图片 -->
        <ul>
            <li><a href="#"><img src="images/banner01.jpg"></a></li>
            <li><a href="#"><img src="images/banner02.jpg"></a></li>
            <li><a href="#"><img src="images/banner03.jpg"></a></li>
            <li><a href="#"><img src="images/banner04.jpg"></a></li>
            <li><a href="#"><img src="images/banner05.jpg"></a></li>
            <li><a href="#"><img src="images/banner06.jpg"></a></li>
        </ul>
        
        <!-- 导航点 -->
        <ol class="circle">
            
        </ol>
    </div>

    <script>
            // 轮播图：
                // 1.0 点击左右按钮切换图片
                // 2.0 点击导航点切换图片
                // 3.0 图片自动切换
                // 4.0 导航点跟随图片切换
                // 5.0 切换的无缝衔接


            // 要求：
                //轮播图做出点击左右按钮切换

            // 思考：
                // 控制哪些元素
                // 如何切换图片

            // 编码：
                // 1.0 获取相关的元素
                var arrow_left = document.querySelector(".arrow_left");
                var arrow_right = document.querySelector(".arrow_right");
                var picItems = document.querySelectorAll(".banner ul li");
                // console.log(picItems);

                // 2.0 定义变量 记录索引值（下标）
                var index = 0;// 主心骨

                // 3.0 利用css的display属性切换图片
                // 左边按钮
                arrow_left.onclick = function(){
                    // 自增
                    index ++;
                    // 判断是否超出最大索引值
                    if(index > picItems.length - 1){
                        // 重置索引值
                        index = 0;
                    }
                    // console.log("index:",index);
                    // 切换图片
                    changeImage(index);
                }
                // 右边按钮
                arrow_right.onclick = function(){
                    // 自减
                    index  --;
                    // 判断是否小于最小索引值
                    if(index < 0){
                          // 重置索引值
                          index = picItems.length - 1;
                    }
                    // console.log("index:",index);
                    // 切换图片
                    changeImage(index);
                }


                // 编写函数 ，切换图片的逻辑
                function changeImage( key ){
                    // 排他思想
                    for(var i = 0 ; i < picItems.length ; i ++){
                        // 所有图片都隐藏
                        picItems[i].style.display= "none";
                    }
                    // 显示索引值对应的图片
                    picItems[key].style.display= "block";
                }
                

              

           
    </script>
</body>
</html>